<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="/js/rem.js" type="text/javascript"></script>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--<meta content="yes" name="apple-touch-fullscreen">-->
    <meta content="telephone=no" name="format-detection">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>参赛选手详情</title>
    <link rel="stylesheet" href="/css/sign-up.css" type="text/css">
    <link rel="stylesheet" href="/css/common.css" type="text/css">
    <link rel="stylesheet" href="/css/player.css" type="text/css">
    <!--TODO: 该页面需要判断用户是否登录 -->
    <script th:if="${user_info}!=null"  th:inline="javascript">
        var user_info={
            user_id:[[${user_info.USER_ID}]],
            user_name:[[${user_info.NICKNAME}]]
        };
        // var wxCallback = [[${wxCallback}]];
        window.localStorage.setItem("user_info", JSON.stringify(user_info));
        // window.localStorage.setItem("wxCallback", JSON.stringify(wxCallback));
    </script>
</head>
<body>
<div id="main"  style="width:100vw;height:100vh;overflow-x: hidden;overflow-y: scroll;">
    <div id="co"  style="width:100%;box-sizing: border-box;">
        <div class="top" th:style="'background-image: url('+${work.getWORK_IMGURL()}+')'">
        <!--TODO 服务器赋初始值 包括ID-->
        </div>
        <div class="center">
            <div class="center_left">
                <input type="hidden" th:value="${work.getACTIVITY_ID()}" id="activity_id">
                <input type="hidden" th:value="${work.getWORK_ID()}" id="work_id">
                <h3 th:text="${work.getWORK_NAME()}">天鹅舞</h3>
                <p th:text="'作者：'+${work.getUSER_NAME()}">作者：汪若萱</p>
                <p th:text="${work.getDISTRICT_NAME()}">重庆儿童图书馆</p>
                <p th:text="${work.getTIME()}">2019-07-15</p>
            </div>
            <div class="center_right">

                <button type="button" id="playwork" th:if="${work.getWORK_TYPE()}!=2"><img id="playicon" src="/img/video_play3.png"><span id="lenghts"></span></button>
                <button type="button" th:onclick = "|javascript:PicLook( '${work.getWORK_ID()}' )|"  th:if="${work.getWORK_TYPE()}==2"><span>查看图片</span></button>

                <p  id="votes_num" style="font-size: 25px;margin-top: 2px;"  th:if="${activity.getIS_ROTE()==0}"><span  th:text="${work.getVOTES_NUMBER()}">36898</span>票</p>
                <p style="    margin-top: 8px; color: #c1c1c1; font-size: 0.9rem;">浏览量 <span  th:text="${work.getWORK_VISIST()}"></span></p>
            </div>
        </div>
        <div style="width: 90%;margin: 0 auto 20px; text-align: justify; line-height: 1.8;position: relative;top: -2rem;">
            <span style="margin-left: 20px;color: #c1c1c1;font-family: 微软雅黑 serif;">作品描述：</span><br/>
            <span style="margin-left: 20px;color: #c1c1c1;font-family: 微软雅黑 serif;" th:text="${work.getWORK_ASSESSMENT()}"></span>
        </div>
        <div class="bottom">

            <a href="javascript:voteup()" class="like1"   th:if="${activity.getIS_ROTE()==0}"><img src="/img/heart_unselected.png">&nbsp;&nbsp;为Ta点赞</a>
            <a href="javascript:share();" class="like2"   th:if="${activity.getIS_ROTE()==0}">为Ta拉票</a><br>
        </div>

        <div style="display: flex;flex-direction: row;align-items: center;height: 64px;width: 100%;">
            <input type="text" name="CONENT" id="CONENT" placeholder="写下你的留言" style="width: 80%;height: 40px;margin: 10px;padding-left: 4px;"/>
            <button type="button" class="button_comment" style="display: block;width: 48px;height: 30px;font-size: 16px;">留言</button>
            <button type="button" class="button_reply" style="display: none;width: 48px;height: 30px;font-size: 16px;">回复</button>
        </div>
        <div id="comments">
        </div>
        <input type="hidden" id="pic" th:value="${work.getWORK_IMGURL()}"/>
        <input type="hidden" id="workName" th:value="${work.getWORK_NAME()}"/>
        <input type="hidden" id="userName" th:value="${work.getUSER_NAME()}"/>
        <input type="hidden" id="activityName" th:value="${activity.getACTIVITY_NAME()}"/>
        <input type="hidden" id="type" th:value="${work.getWORK_TYPE()}"/>
        <input type="hidden" id="comment_id"/>
        <input type="hidden" id="comment_user"/>
    </div>
</div>
<div  th:if="${work.getWORK_TYPE()}==0"   class="work_dialog"  style="display: none;" >

    <div class="video_alert">
           <video th:src="${work.getRESOURCE_URL()}" controls></video>
    </div>

</div>
<div   th:if="${work.getWORK_TYPE()}==1"  class="work_dialog" style="display: none;">
    <div class="audio_alert">
        <div class="active_audio"><img src="/img/audio_efx.png"></div>
        <audio th:src="${work.getRESOURCE_URL()}" style="width:100%;height:2rem;" controls></audio>
    </div>
</div>
<div class="vote_win">
    <div class="active_vote">
        <img src="/img/vote.png">
        <p>本活动每人每天只有<span id="votes_limit_perday" th:text="${activity.getVOTES_LIMIT_PERDAY()}"></span>次投票/点赞权</p>
        <input type="hidden" id="is_vote" th:value="${activity.getIS_VOTE()}"/>

        <button class="sure">确认投票</button>
        <br>
        <button class="out">我再想想</button>
    </div>
</div>
<div class="share">
    <div class="share_show">
        <div>
            <img src="/img/share_pointer.png">
        </div>
    </div>
</div>
<input style="display: none" id="lenght" th:value="${work.getWORK_LENTH()}"/>
<script type="text/javascript" src="/js/zepto.js"></script>
<script type="text/javascript" src="/js/touch.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript">
    var title='我参加了（'+$("#activityName").val()+'）活动，我的参赛作品是：'+$("#workName").val()+'，快来为我投票吧！';
    var desc='我参加了（'+$("#activityName").val()+'）活动，我的参赛作品是：'+$("#workName").val()+'，快来为我投票吧！';
    var URL=window.location.href.split("#")[0];
    var pic=$("#pic").val();
    $.ajax({
        async : false,   //这里参数true和false在微信中打开会有不同效果，实际用的时候用false,用true时候测试会有提示性内容。
        url : '/share',
        type : "POST",
        dataType : "json", // 返回的数据类型，设置为JSONP方式
        data : {
            URL : encodeURIComponent(URL)
        },
        success: function(response, status, xhr){
            //console.log('状态为：' + status + ',状态是：' + xhr.statusText);
            //console.log(response);
            wx.config({
                debug: false, //调试阶段建议开启，关闭就不弹提示了
                appId: response.appId,//APPID
                timestamp: response.timestamp,//上面main方法中拿到的时间戳timestamp
                nonceStr: response.nonceStr,//上面main方法中拿到的随机数nonceStr
                signature: response.signature,//上面main方法中拿到的签名signature
                //需要调用的方法接口
                jsApiList: [
                    'updateAppMessageShareData','updateTimelineShareData']
            });
            //ready
            wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                wx.updateAppMessageShareData({
                    title: title, // 分享标题
                    desc: desc, // 分享描述
                    link: URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: pic, // 分享图标
                    success: function () {
                        // 设置成功
                    }
                })
                wx.updateTimelineShareData({
                    title: title, // 分享标题
                    desc: desc, // 分享描述
                    link: URL, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: pic, // 分享图标
                    success: function () {
                        // 设置成功
                    }
                })
            });
        }
    });

</script>

<script type="text/javascript" th:inline="javascript">
    $(function () {
        // if([[${wxCallback}]]){
        //     $.ajax({
        //         url:"/front/vote",//TODO： 投票 接口  作品ID 以及用户ID
        //         data: {
        //             work_id: $("#work_id").val()
        //             ,user_id: JSON.parse(window.localStorage.getItem("user_info")).user_id,
        //             activity_id:$("#activity_id").val()
        //         },
        //         async:false,
        //         dataType:"json",
        //         success:function(res){
        //             if(res.code==1){
        //                 $("#votes_num").find("span").html(parseInt($("#votes_num").find("span").html())+1);
        //                 alert("投票成功！")
        //             }else{
        //                 alert(res.msg);
        //             }
        //             //然后才可以点赞
        //             $(".vote_win").css("display", "none");
        //         },
        //         error:function(res){
        //             alert("网络错误···")
        //         }
        //     })
        // }
        var lenght=$("#lenght").val();
        var type=$("#type").val();
        if(lenght==null||lenght==0){
            lenght=0;
            if(type==0){
                $("#lenghts").html("查看视频");
            }else if(type==1){
                $("#lenghts").html("查看音频");
            }
        }else{
           var m= parseInt(lenght/60);
           var s= lenght%60;
           if(m<1){
               $("#lenghts").html(s+"``");
           }else if(s==0){
               $("#lenghts").html(m+"`");
           }else{
               $("#lenghts").html(m+"`"+s+"``");
           }
        }
        $("#playwork").on("tap", function () {
            $(".work_dialog").css("display", "block");
        })
        $(".work_dialog").on("tap", function () {
            //停止播放 并隐藏播放界面
            if($(this).find("video").length>0){
                var video=$(this).find("video")[0]
                video.pause();
                video.currentTime=0;
            }
            if($(this).find("audio").length>0){
                var audio=$(this).find("audio")[0]
                audio.pause();
                audio.currentTime=0;
            }
            $(".work_dialog").css("display", "none");
        })
        $(".video_alert").on("tap", function (event) {
            return false;
        })
        $(".audio_alert").on("tap", function (event) {
            return false;
        })
        //投票 需要登录
        $(".sure").on("tap",function(){
            var is_Vote= $("#is_vote").val();
            if(is_Vote==0){
                alert("投票未开始！");
                return;
            }
            if(is_Vote==2){
                alert("投票已结束！");
                return;
            }
            //TODO: 这里应该要求用户登录
            var user_info=JSON.parse(window.localStorage.getItem("user_info"));
            if(!user_info||user_info.user_id==""||user_info.user_id==null){
                alert("请先登录，页面跳转后进行投票！");
                //请求登录
                window.location.href="/front/userLogin?state=%2ffront%2fshowWork%3fwork_id%3d"+$("#work_id").val();
                return;
            }
            $.ajax({
                url:"/front/vote",//TODO： 投票 接口  作品ID 以及用户ID
                data: {
                    work_id: $("#work_id").val()
                    ,user_id: JSON.parse(window.localStorage.getItem("user_info")).user_id,
                    activity_id:$("#activity_id").val()
                },
                async:false,
                dataType:"json",
                success:function(res){
                    if(res.code==1){
                        $("#votes_num").find("span").html(parseInt($("#votes_num").find("span").html())+1);
                        alert("投票成功！")
                    }else{
                        alert(res.msg);
                    }
                    //然后才可以点赞
                    $(".vote_win").css("display", "none");
                },
                error:function(res){
                    alert("正在加载···")
                }
            })

        })
        $(".out").on("tap", function () {
            $(".vote_win").css("display", "none");
        })
        //关闭投票对话框
        $(".vote_win").on("tap",function(){
            $(".vote_win").css("display", "none");
        })
        //关闭分享提示
        $(".share").on("tap",function () {
            $(".share").css("display", "none");
        })
        //发布评论时验证登录
        $("#CONENT").on("tap", function (e) {
            var user_info=JSON.parse(window.localStorage.getItem("user_info"));
            if(!user_info||user_info.user_id==""||user_info.user_id==null){
                //请求登录
                alert("请先登录，页面跳转后进行留言！");
                window.location.href="/front/userLogin?state=%2ffront%2fshowWork%3fwork_id%3d"+$("#work_id").val();
                return;
            }
            return false;
        });
        $(".button_comment").on("tap", function (e) {
            var user_info=JSON.parse(window.localStorage.getItem("user_info"));
            if(!user_info||user_info.user_id==""||user_info.user_id==null){
                //请求登录
                alert("请先登录，页面跳转后进行留言！");
                window.location.href="/front/userLogin?state=%2ffront%2fshowWork%3fwork_id%3d"+$("#work_id").val();
                return;
            }

            var CONENT = $("#CONENT").val();
            var WORK_ID = $("#work_id").val();
            var USER_ID = user_info.user_id;
            var length = CONENT.length;
            if (CONENT == "" ||CONENT == null) {
                alert('请输入您的留言！');
                return;
            }
            if (length>200) {
                alert('最多写入200个字符');
                return;
            }
            $.ajax({
                url: "/Comment",
                method: "get",
                async: false,
                data: {
                    CONENT: CONENT,
                    WORK_ID: WORK_ID,
                    USER_ID:USER_ID,
                    LEVEL:1
                },
                dataType: "json",
                success: function (res) {
                    if(res>0){
                        $("#CONENT").val("");//清空评论内容
                        $("#comments").html("");//清空评论列表
                        getMoreComments();//请求新的评论列表
                    }else{
                        alert("评论失败！");
                        $("#CONENT").val("");//清空评论内容
                    }
                }
            });
            return false;
        });
        $(".button_reply").on("tap", function (e) {
            var user_info=JSON.parse(window.localStorage.getItem("user_info"));
            if(!user_info||user_info.user_id==""||user_info.user_id==null){
                //请求登录
                alert("请先登录！");
                window.location.href="/front/userLogin?state=%2ffront%2fshowWork%3fwork_id%3d"+$("#work_id").val();
                return;
            }
            var CONENT = $("#CONENT").val();
            var WORK_ID = $("#work_id").val();
            var USER_ID = user_info.user_id;//回复者
            var PARENT_ID= $("#comment_id").val();//被回复id
            var length = CONENT.length;
            if (CONENT == "" ||CONENT == null) {
                alert('请输入您的回复！');
                return;
            }
            if (length>200) {
                alert('最多写入200个字符');
                return;
            }
            $.ajax({
                url: "/Reply",
                method: "get",
                async: false,
                data: {
                    CONENT: CONENT,
                    WORK_ID: WORK_ID,
                    USER_ID:USER_ID,
                    PARENT_ID:PARENT_ID,
                    LEVEL:2
                },
                dataType: "json",
                success: function (res) {
                    if(res>0){
                        //清空评论内容
                        $("#CONENT").val("");
                        //清空评论列表
                        $("#comments").html("");
                        //将提示改成留言
                        $("#CONENT").attr("placeholder","写下你的留言");
                        //显示留言，隐藏回复
                        $('.button_comment').css("display","block");
                        $('.button_reply').css("display","none");
                        //请求新的评论列表
                        getMoreComments();
                    }else{
                        alert("回复失败！");
                        //清空评论内容
                        $("#CONENT").val("");
                        //将提示改成留言
                        $("#CONENT").attr("placeholder","写下你的留言");
                        //显示留言，隐藏回复
                        $('.button_comment').css("display","block");
                        $('.button_reply').css("display","none");
                    }
                }
            });
            return false;
        });
        getMoreComments();
    });
    //评论界面的上拉加载更多
    $("#main").off("scroll").on("scroll", function () {
        //获取当前浏览器的滚动条高度
        //scrollHeight真实高度
        if (this.scrollHeight <= (this.scrollTop + $(this).height())) { //判断当前浏览器滚动条高度是否已到达浏览器底部，如果到达底部加载下一页数据信息
            console.log("滑到底部 。。。");
            //加载更多
            $("#comments").children().last().removeClass("hasnomore").addClass("loading");
            getMoreComments();
        }
    });
    //显示投票对话框
    function voteup(e) {
        $(".vote_win").css("display", "block");
    }
    //显示分享提示
    function share(e) {
        $(".share").css("display", "block");
    }
    function PicLook(work_id) {
        window.location.href = "/front/PicLook?work_id=" + work_id;
    }
    var loadMoreComments = false;
    window.tplReg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
    function getMoreComments() {
        if (loadMoreComments) {
            return;
        }
        loadMoreComments = true;
        $.ajax({
            method: "get",
            url: "/getComments",
            data: {
                WORK_ID: $("#work_id").val(),
                start: $("#comments").find("div.OneCommentDiv").length + 1,
                count: 5
            },
            async:false,
            dataType: "json",
            dataFilter: function (data, type) {
                return JSON.stringify(window.getLowerCaseKeyJsonByRecursive(JSON.parse(data)));
            },
            success: function (res) {
                //console.log("评论success", res);
                //获取成功 作品列表
                if (res.code == 0) {
                    alert("服务器返回了错误的结果！");
                    return;
                }
                if (res.data.length > 0) {
                    //实例化作品
                    for (var i = 0; i < res.data.length; i++) {
                        var html1 =" <div onclick='reply("+res.data[i].id+")' style='margin: 5px auto;width: 95%' class='OneCommentDiv'>" +
                            "           <img src='"+res.data[i].head_img_url+"' style='width: 30px;vertical-align: middle;'>" +
                            "           <span style='color:#c1c1c1;' id='s"+res.data[i].id+"'>"+res.data[i].nickname+":</span><br>" +
                            "           <p style='padding-left:35px;font-size: 16px;'>"+res.data[i].conent+"</p>" +
                            "        </div>";
                        $("#comments").append(html1);
                        if(res.data[i].child.length > 0){
                            for(var j = 0; j < res.data[i].child.length; j++){
                                var html2 =" <div style='margin: 5px auto;width: 83%'>" +
                                    "           <img src='"+res.data[i].child[j].head_img_url+"' style='width: 30px;vertical-align: middle;'>" +
                                    "           <span style='color:#c1c1c1;'>"+res.data[i].child[j].nickname+"回复"+res.data[i].child[j].be_nickname+":</span><br>" +
                                    "           <p style='padding-left:35px;font-size: 16px;'>"+res.data[i].child[j].conent+"</span>" +
                                    "        </div>";
                                $("#comments").append(html2);
                            }
                        }
                    }
                    $("comments").children().last().removeClass("loading").removeClass("hasnomore");
                } else {
                    $("comments").children().last().removeClass("loading").addClass("hasnomore");
                }
            },
            error: function (res) {
                alert("正在加载···")
            },
            complete: function (res) {
                //清除加载
                loadMoreComments = false;
            }
        });
    }

    window.IsArray = function (v) {
        return Object.prototype.toString.call(v) == '[object Array]';
    }
    window.IsObject = function (v) {
        return Object.prototype.toString.call(v) == '[object Object]';
    }

    window.getLowerCaseKeyJsonByRecursive = function (obj) {
        var ret = {}//转成对象 进行属性名小写化
        if (window.IsArray(obj)) {
            ret = [];
            for (var i = 0; i < obj.length; i++) {
                //此方法一定可以完成 这个功能 传入一个大写KEY 导出一个小写KEY
                var tmp_obj = window.getLowerCaseKeyJsonByRecursive(obj[i])
                ret.push(tmp_obj);
            }
            return ret;
        } else if (window.IsObject(obj)) {
            ret = {};
            for (var key in obj) {
                //普通字符串
                ret[key.toLowerCase()] = window.getLowerCaseKeyJsonByRecursive(obj[key]);
            }
            return ret;
        } else {
            return obj;
        }
    };
    //作者回复
    function reply(id){
        var name = $("#s"+id).text();
        var user_info=JSON.parse(window.localStorage.getItem("user_info"));
        if(!user_info||user_info.user_id==""||user_info.user_id==null){
            //请求登录
            alert("请先登录！");
            window.location.href="/front/userLogin?state=%2ffront%2fshowWork%3fwork_id%3d"+$("#work_id").val();
            return;
        }
        $.ajax({
            method: "get",
            url: "/IsAuthor",
            data: {
                WORK_ID: $("#work_id").val(),
                USER_ID: user_info.user_id
            },
            success: function (res) {
                if(res){
                    //将焦点放到输入框
                    $("#CONENT").focus();
                    //将提示改成回复某某
                    $("#CONENT").attr("placeholder","回复"+name);
                    //将留言改成回复
                    $(".button_comment").text("回复");
                    //显示回复，隐藏留言
                    $('.button_comment').css("display","none");
                    $('.button_reply').css("display","block");
                    //将评论id放到指定位置
                    $("#comment_id").val(id);
                }
            }
        });
    }
</script>
</body>
</html>